<template>
    <view class="qiun-columns">
        <view class="qiun-charts">
            <div style="font-size: 14px; padding: 10px; text-align: center;">最近一年的订单数</div>
            <canvas canvas-id="statisticOrderNumberRecentMonthsOfYear" id="statisticOrderNumberRecentMonthsOfYear" class="charts" disable-scroll=true
                    @touchstart="touchLineA" @touchmove="moveLineA"
                    @touchend="touchEndLineA"></canvas>
        </view>
    </view>
</template>

<script>
    import uCharts from '@/components/u-charts/u-charts.min.js';
    import {CommonUtil} from "@/dev/core/utils/common.util";

    var _self;
    var canvaLineA = null;

    export default {
        props: [
            'chartsData'
        ],
        data() {
            return {
                cWidth: '',
                cHeight: '',
                pixelRatio: 1,
                textarea: ''
            }
        },
        mounted() {
            _self = this;
            //#ifdef MP-ALIPAY
            uni.getSystemInfo({
                success: function (res) {
                    if (res.pixelRatio > 1) {
                        //正常这里给2就行，如果pixelRatio=3性能会降低一点
                        //_self.pixelRatio =res.pixelRatio;
                        _self.pixelRatio = 2;
                    }
                }
            });
            //#endif
            this.cWidth = uni.upx2px(500);
            this.cHeight = uni.upx2px(300);
            this.getServerData();
        },
        methods: {
            getServerData() {
                _self.showLineA("statisticOrderNumberRecentMonthsOfYear", _self.chartsData);
            },
            showLineA(canvasId, chartData) {
                canvaLineA = new uCharts({
                    $this: _self,
                    canvasId: canvasId,
                    type: 'line',
                    fontSize: 11,
                    padding: [15, 15, 0, 15],
                    legend: {
                        show: true,
                        padding: 5,
                        lineHeight: 11,
                        margin: 5,
                    },
                    dataLabel: true,
                    dataPointShape: true,
                    dataPointShapeType: 'hollow',
                    background: '#FFFFFF',
                    pixelRatio: _self.pixelRatio,
                    categories: chartData.categories,
                    series: chartData.series,
                    animation: true,
                    enableScroll: true,//开启图表拖拽功能
                    xAxis: {
                        disableGrid: false,
                        type: 'grid',
                        gridType: 'dash',
                        itemCount: 4,
                        scrollShow: true,
                        scrollAlign: 'left'
                    },
                    yAxis: {
                        //disabled:true
                        gridType: 'dash',
                        splitNumber: 8,
                        // min: 10,
                        // max: 180,
                        format: (val) => {
                            return val.toFixed(0)
                        }//如不写此方法，Y轴刻度默认保留两位小数
                    },
                    width: 400,
                    height: 250,
                    extra: {
                        line: {
                            type: 'straight'
                        }
                    },
                });

            },
            touchLineA(e) {
                canvaLineA.scrollStart(e);
            },
            moveLineA(e) {
                canvaLineA.scroll(e);
            },
            touchEndLineA(e) {
                canvaLineA.scrollEnd(e);
                //下面是toolTip事件，如果滚动后不需要显示，可不填写
                canvaLineA.touchLegend(e);
                canvaLineA.showToolTip(e, {
                    format: function (item, category) {
                        return category + ' ' + item.name + ':' + item.data
                    }
                });
            },
            changeData() {
                if (CommonUtil.isJSON(_self.textarea)) {
                    let newdata = JSON.parse(_self.textarea);
                    canvaLineA.updateData({
                        series: newdata.series,
                        categories: newdata.categories,
                        scrollPosition: 'right',
                        animation: false
                    });
                } else {
                    uni.showToast({
                        title: '数据格式错误',
                    })
                }
            }
        }
    }
</script>

<style>
    /*样式的width和height一定要与定义的cWidth和cHeight相对应*/
    .qiun-charts {
        width: 100%;
        height: 300px;
        background-color: #FFFFFF;
    }

    .charts {
        width: 100%;
        height: 250px;
        background-color: #FFFFFF;
    }
</style>
